<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-11-08 10:54:33
 * @LastEditors: younghxp
 * @LastEditTime: 2021-11-19 11:29:09
-->
<template>
  <div class="content">
    <div
      class="topBox"
      v-hasBtn="'insuranceOrder:update'"
      v-if="
        ($store.state.userType === 'PROJECT_ADMINISTRATOR' ||
          $store.state.userType === 'LABOR_ADMINISTRATOR' ||
          $store.state.userType === 'FENBAO_MANAGER') &&
        !dialogVisible
      "
    >
      <span class="title">{{ projectName }}</span>
      <el-button
        type="primary"
        @click="toInsuranceReg"
        class="commonBtn jumpBtn"
      >
        <span>投保登记</span>
      </el-button>
    </div>
    <el-tabs v-model="activeName" class="commonTab" type="card">
      <el-tab-pane label="投保订单" name="first">
        <insurance-order-list v-if="!dialogVisible"></insurance-order-list>
        <div class="noPaymeny" v-else>
          <img src="../../../static/img/noDataInfo.png" alt="" />
          <p>当前区域未开放保险业务</p>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="待我审核的订单"
        name="third"
        v-if="$store.state.userType === 'MONITOR'"
      >
        <check-pending-list v-if="!dialogVisible"></check-pending-list>
        <div class="noPaymeny" v-else>
          <img src="../../../static/img/noDataInfo.png" alt="" />
          <p>当前区域未开放保险业务</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="理赔记录" name="second">
        <claim-record-list v-if="!dialogVisible"></claim-record-list>
        <div class="noPaymeny" v-else>
          <img src="../../../static/img/noDataInfo.png" alt="" />
          <p>当前区域未开放保险业务</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import insuranceOrderList from './insuranceOrderList.vue'
import claimRecordList from './claimRecordList.vue'
import checkPendingList from './checkPendingList.vue'

export default {
  name: 'insuranceOrder',
  data() {
    return {
      projectName: '',
      activeName: 'first',
      isShowFirst: true,
      list: [],
      projectId: this.$store.state.projectId,
      dialogVisible: true,
    }
  },
  components: {
    insuranceOrderList,
    claimRecordList,
    checkPendingList,
  },

  created() {
    this.projectName = this.$store.state.projectName
    if (this.$route.query.activeName == 'second') {
      this.activeName = 'second'
    }
    this.isOpen()
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // if (vm.$store.state.userType === 'PROJECT_ADMINISTRATOR' || vm.$store.state.userType === 'LABOR_ADMINISTRATOR' || vm.$store.state.userType === 'FENBAO_MANAGER') {
      // vm.isOpen(next);
      // } else {
      //     next()
      // }
    })
  },
  methods: {
    isOpen() {
      let areaId = ''
      let vm = this
      if (
        vm.$store.state.userType === 'PROJECT_ADMINISTRATOR' ||
        vm.$store.state.userType === 'LABOR_ADMINISTRATOR' ||
        vm.$store.state.userType === 'FENBAO_MANAGER'
      ) {
        areaId = this.$store.state.projectAreaId
      } else {
        areaId = this.$store.state.currentAreaId
      }
      return this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/findInsureForProject',
        data: {
          areaId: areaId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            //开启
            if (response.data.result) {
              this.dialogVisible = false
            } else {
              this.dialogVisible = true
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    toInsuranceReg() {
      // 更改到跳转到引导页
      this.$router.push({
        path: '/home/newInsurance/insuranceOrderGuide',
        name: 'insuranceOrderGuide',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/newInsurance/insuranceOrder',
        newUrl: this.$router.currentRoute.fullPath,
      })

      // this.$router.push({
      //     path: '/home/newInsurance/insuranceOrderProgress',
      //     name: 'insuranceOrderProgress',
      //     query: {
      //         step: 1,
      //         type:"add"
      //     }
      // });
      // this.$store.commit("CHANGE_SLIDER_NAME", { oldUrl: "/home/newInsurance/insuranceOrder", newUrl: this.$router.currentRoute.fullPath });
    },
  },
}
</script>
<style lang="less" scoped>
.content {
  .topBox {
    height: 54px;
    padding: 0 24px;
    line-height: 54px;
    position: relative;
    &::after {
      position: absolute;
      right: -0px;
      top: 54px;
      left: -0px;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
    .title {
      font-size: 22px;
      color: #242c3b;
      font-weight: 700;
    }
    .jumpBtn {
      width: 136px;
      height: 36px;
      position: absolute;
      top: 50%;
      right: 24px;
      transform: translateY(-50%);
    }
  }
  // /deep/ .el-tabs__header {
  //     margin-bottom: 0;
  // }
  // /deep/ .el-tabs__nav-scroll {
  //     padding: 0 24px;
  // }
  // /deep/ .el-tabs__item {
  //     height: 46px;
  //     line-height: 46px;
  // }
  // /deep/ .el-tabs__item.is-active {
  //     font-size: 14px;
  //     color: #3189ea;
  //     font-weight: 700 !important;
  // }
  // /deep/ .el-tabs__nav-wrap::after {
  //     height: 1px;
  //     background-color: #dbdbdb;
  // }
  // /deep/ .el-tabs__active-bar {
  //     background: #3189ea !important;
  // }
}
.noPaymeny {
  text-align: center;
  padding-top: 140px;
  img {
    display: block;
    width: 170px;
    height: 124px;
    margin: 0 auto 15px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
